<template>
  <v-container fluid>
    <v-row>
      <v-col cols="6" sm="6">
        <v-textarea v-model="oldString" label="旧文本" outlined></v-textarea>
      </v-col>
      <v-col cols="6" sm="6">
        <v-textarea v-model="newString" label="新文本" outlined></v-textarea>
      </v-col>
    </v-row>

    <code-diff
      :old-string="formattedOldString"
      :new-string="newString"
      output-format="side-by-side"
    />
  </v-container>
</template>

<script>
export default {
  computed: {
    formattedOldString() {
      return this.oldString;
    },
  },
  data() {
    return {
      oldString: "",
      newString: "",
    };
  },
};
</script>
